<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资源管理</title>
    <link rel="stylesheet" href="__ADMIN__/css/amazeui.min.css" />
    <link rel="stylesheet" href="__ADMIN__/css/app.css">
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
    <script src="__COMMON__/jquery.min.js"></script>
</head>
<body>
<div style="background: #e9ecf3" class="theme-white">
    <div class="row-content am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12" style="background: white">
                <div class="widget am-cf">
                    <div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
                        <h2 class="am-titlebar-title">资源管理</h2>
                    </div>
                    <div class="widget-body  am-fr">

                        <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                            <div class="am-form-group">
                                <div class="am-btn-toolbar">
                                    <div class="am-btn-group am-btn-group-xs">
                                        <button type="button" class="am-btn am-btn-default am-btn-success" id="upload">
                                            <span class="am-icon-plus"></span> 新增
                                        </button>
                                        <span style="color:red;font-size: 12px;margin-left: 20px;top: 7px;position: relative">目前系统最大上传限制为: {:ini_get("upload_max_filesize")}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                            <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                <input type="text" class="am-form-field " id="searchText" placeholder="图片名称">
                                <span class="am-input-group-btn" id="search-btn">
                                    <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" type="button"></button>
                                </span>
                            </div>
                        </div>

                        <div class="am-u-sm-12">
                            <table class="layui-hide" id="data-table" lay-filter="data-table"></table>

                            <script type="text/html" id="toolbar">

                            </script>

                            <script type="text/html" id="content-bar">
                                <img src="{{ d.url }}" style="max-height: 30px;max-width: 30px;cursor: pointer" onclick="showBig(this)">
                            </script>

                            <script type="text/html" id="opt-bar">
                                <div class="tpl-table-black-operation">
                                    <a href="javascript:;" class="tpl-table-black-operation-del" lay-event="del"><i class="am-icon-trash"></i> 删除</a>
                                </div>
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="__ADMIN__/js/amazeui.min.js"></script>
<script src="__STATIC__/layui/layui.js"></script>
<script>
    initTable();

    function initTable() {

        layui.use('table', function(){
            var table = layui.table;

            table.render({
                elem: '#data-table'
                ,url:'{:url("attachment/index")}'
                ,where: {name: $("#searchText").val()}
                ,toolbar: '#toolbar'
                ,defaultToolbar: ['filter', 'exports', 'print']
                ,title: '图片列表'
                ,cols: [[
                    {field:'img_id', title:'ID', width: 80}
                    ,{field:'name', title:'图片名称'}
                    ,{field:'url', title:'缩略图', toolbar: '#content-bar', align: 'center', width: 80}
                    ,{field:'url', title:'图片地址'}
                    ,{field:'create_time', title:'创建时间'}
                    ,{fixed: 'right', title:'操作', toolbar: '#opt-bar', width:150}
                ]]
                ,page: {
                    theme: '#23abf0'
                }
            });

            table.on("tool(data-table)", function(e) {

                if ("del" == e.event) {

                    layer.confirm('您确定要删除该图片？', {
                        icon: 3,
                        title: '友情提示',
                        btn: ['确定', '取消']
                    }, function() {

                        $.getJSON('{:url("attachment/del")}', {
                            id: e.data.img_id,
                            path: e.data.path
                        }, function (res) {
                            if (res.code == 0) {
                                layer.msg(res.msg);

                                setTimeout(function () {
                                    initTable();
                                }, 800);
                            } else {
                                layer.msg(res.msg);
                            }
                        });
                    }, function() {

                    });
                }
            });
        });
    }

    layui.use(['upload', 'layer'], function(){
        var upload = layui.upload;
        var layer = layui.layer;

        var index = null;
        upload.render({
            elem: '#upload'
            ,accept: 'images'
            ,acceptMime: '{$img["acceptMime"]}'
            ,exts: '{$img["ext"]}'
            ,url: '{:url("attachment/upload")}'
            ,before: function () {
               index = layer.load(0, {shade: false});
            }
            ,done: function(res) {
                layer.close(index);
                if (res.code == 0) {
                    layer.msg(res.msg);
                    setTimeout(function () {
                        initTable();
                    }, 1000);
                } else {
                    layer.msg(res.msg);
                }
            }
            ,error: function() {
                layer.close(index);
                layer.msg('上传失败');
            }
        });
    });

    function showBig(obj) {

        layer.photos ({
            photos: {
                data: [{
                    "alt": "大图模式",
                    "src": $(obj).attr('src')
                }]
            }
            , shade: 0.5
            , closeBtn: 2
            , anim: 0
            , resize: false
            , success: function (layero, index) {

            }
        });
    }

    $(function () {

        // 查询
        $('#search-btn').click(function () {
            initTable();
        });
    });
</script>
</body>
</html>